<template>
  <div>
    <div id="mainkps">
    </div>
    <p style="font-size:0.4rem;">force06</p>
  </div>

</template>

<script>
  export default{
    props:['dataj'],
    data(){
      return{
        tabledata:[],

      }
    },
    created() {
      //用于px转换rem，echarts读取不到rem，所以这里要换算
      var d = document.documentElement;
      var cw = d.clientWidth || 750;
      document.documentElement.style.fontSize = (cw/750 * 100) + 'px';
      this.getLoading();
    },
    mounted() {
      this.showCharts()
    },
    methods:{
      getLoading(){
        var that=this;
        that.tabledata=that.dataj;

      },
      //rem转换px
      remToPx(rem) {
        var fontSize = document.documentElement.style.fontSize;
        return Math.floor(rem * fontSize.replace('px', ''));
      },
      showCharts(){

         // 基于准备好的dom，初始化echarts实例,采用svg渲染
         var myChart = this.$echarts.init(document.getElementById('mainkps'),null, {renderer: 'svg'});

         // 绘制图表,注意有值为0要判断改为’-‘
         // var data = this.tabledatayc;
         // var titlename = this.tabledataya;
         // var dataH = this.tabledatayb;




        var color = ['#7bdbce', '#4200ad', '#21fcd6', '#08c8ff', '#df4131','#7b55ff'];
        var data = this.tabledata;

        var max = data[0].value;
        data.forEach(function(d) {
          max = d.value > max ? d.value : max;
        });

        var renderData = [{
          value: [],
          name: "告警类型TOP5",
          symbol: 'none',
          lineStyle: {
            normal: {
              color: '#417ee5',
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0,
                [{
                  offset: 0,
                  color: '#417ee5'
                }, {
                  offset: 1,
                  color: '#417ee5'
                }],
                false)
            }
          }
        }];


        data.forEach(function(d, i) {
          var value = ['', '', '', '', '',''];
          value[i] = max,
            renderData[0].value[i] = d.value;
          renderData.push({
            value: value,
            symbol: 'circle',
            symbolSize: 12,
            lineStyle: {
              normal: {
                color: 'transparent'
              }
            },
            itemStyle: {
              normal: {
                color: color[i],
              }
            }
          })
        })
        var indicator = [];

        data.forEach(function(d) {
          indicator.push({
            name: d.name,
            max: max,
            color: '#fff'
          })
        })


        var option = {
          backgroundColor: '#0f2e6f',
          // tooltip: {
          //   show: true,
          //   trigger: "item"
          // },
          radar: {
            center: ["50%", "50%"],
            radius: "70%",
            startAngle: 90, // 起始角度
            splitNumber: 4,
            shape: "circle",
            splitArea: {
              areaStyle: {
                color: 'transparent'
              }
            },
            axisLabel: {
              show: false,
              fontSize: 20,
              color: "#000",
              fontStyle: "normal",
              fontWeight: "normal"
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255, 255, 255, 0.5)",
                opacity:0.4
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255, 255, 255, 0.5)",
                opacity:0.4
              }
            },
            indicator: indicator
          },
          series: [{
            type: "radar",
            data: renderData
          }]
        }

         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
      }
    }
  }
</script>

<style>
  #mainkps{
    width:100%;height:4.8rem;float:left;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
  body{
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
   }
</style>
